<template>
  <div class="time-tabs">
    <van-tabs v-model:active="active" @change="handleChange">
      <van-tab title="全部" name="all"></van-tab>
      <van-tab title="今天" name="today"></van-tab>
      <van-tab title="本周" name="week"></van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const props = defineProps({
  active: {
    type: String,
    default: 'all'
  }
})

const emit = defineEmits(['change'])

const active = ref(props.active)

const handleChange = (name: string) => {
  emit('change', name)
}
</script>

<style lang="less" scoped>
.time-tabs {
  position: sticky;
  top: 90px;
  z-index: 98;
  background: white;

  :deep(.van-tabs__wrap) {
    padding: 0 20px;
  }
}
</style>
